@base: #22222f; //底部导航拦背影色； 
@white:#FFF; // 白色应用在字体 上  
@black:#22222f;  //通常是更改更改背影色
@red:#f53048; // 红色
@gray:#f6f6f6;  // 灰色
@active:#f53048;
@cfont:#333333; // 
@cfont2:#999999;
@cfont3:#666666; 

body{
    background: @black;
}
//搜索页
body.white, 
body.white .mui-content{
    background-color: @white;
}
body.gray,
body.gray .mui-content{
    background: @gray;
}
img{
    display: block;
}
.maximg{
    .width(100%);
}
.box-shadow(@style) {
  -webkit-box-shadow: @style;
  box-shadow:         @style;
}
.fontSize(@size){
    font-size: @size/2;
}
.width(@size){
    width: @size;
}
.ell{
    white-space:nowrap;
     text-overflow:ellipsis; 
     -o-text-overflow:ellipsis; 
     overflow: hidden;
}
.weqh(@width, @height){
    width: @width;
    height: @height;
}
.wh2x(@width, @height){
    width:@width/2;
    height:@height/2;
}
ul, li{
    list-style: none;
}

//按钮样式
.bexta-color(@color,@fontColor){ 
    border: 1px solid @color;
    background-color: @color;
    color:@fontColor; 
    &:active{
        color: #fff;
        border: 1px solid @color+50;
        background-color: @color+50;
    }
}
.opacity(@num){
    -webkit-opacity:@num;
    opacity:@num;
}

.vmiddle(){
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
.afterHeight(@width, @height){
    position: absolute;
    content:" ";
    width: @width;
    height: @height;
}

//星星
.score{
     margin-top: 10px;
     .mui-pull-left{
         color: #999999;
         .fontSize(20px);
         &.score_comment{
             padding-left: 10px;
         }
     }
     .score_star{
         img{
             display: inline-block;
             height: 9.5px !important;
             width: 9.5px !important;
         }
     }
     &.red{
         .score_star{ 
             img{
                display: inline-block;
                width: 19px !important;
                height: 19px !important;
            }
         }
     }
 }
 
.clump(@num){
     display: -webkit-box;
    -webkit-line-clamp: @num;
    -webkit-box-orient: vertical;
    word-break: break-all;
}


.mui-bar.drak{
    background: #22222f;
    h1{
        color: #FFF;
    }
}

.mui-checkbox.mui-left input[type=checkbox]{
    left: 10px;
    width: 19px;
    height: 19px;
}
.mui-checkbox input[type=checkbox]:before{
    font-size: 19px;
}
.mui-checkbox input[type=checkbox]:checked:before{
    color: @red;
}
.mui-checkbox.mui-left label{ 
    .fontSize(24px);
    color: @cfont2;
    padding: 8px 15px;
    padding-left: 35px;
}


// 页面显示数据前的处
.loading{
    opacity: 0;
    -webkit-transition:opacity 1s;
                transition:opacity 1s;
//        top:30%;
//      -webkit-transform:translateY(10%);
//              transform:translateY(10%); 
    &.loadRun{
        opacity:1;
//      -webkit-transform:translateY(0px);
//      transform:translateY(0px);
    }
}


.mui-pull-bottom-tips {
    text-align: center;
    background-color: transparent;
    font-size: 15px;
    line-height: 40px;
    color: #777;
}
.mui-pull-top-tips {
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -25px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    z-index: 11111;
}
.mui-bar~.mui-pull-top-tips {
    top: 24px;
}
.mui-pull-top-wrapper {
    width: 42px;
    height: 42px;
    display: block;
    text-align: center;
    background-color: #efeff4;
    border: 1px solid #ddd;
    border-radius: 25px;
    background-clip: padding-box;
    box-shadow: 0 4px 10px #bbb;
    overflow: hidden;
}
.mui-pull-top-tips.mui-transitioning {
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
}
.mui-pull-top-tips .mui-pull-loading {
    margin: 0;
}
.mui-pull-top-canvas {
    overflow: hidden;
    background-color: #fafafa;
    border-radius: 40px;
    box-shadow: 0 4px 10px #bbb;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}
.mui-pull-top-canvas canvas {
    width: 40px;
}
.mui-slider-indicator.mui-segmented-control {
    background-color: #efeff4;
}


.mui-poppicker-header{
    .mui-poppicker-btn-cancel{
        border:0 none;
        background-color: transparent;
        color: @cfont2;
        font-size: 28px/2;
    }
    .mui-poppicker-btn-ok{
        border: 0 none;
        background-color: transparent;
        color: @red;
         font-size: 28px/2;
    }
}
.mui-dtpicker-header{
    .mui-btn{
        border:0 none;
        background-color: transparent;
        color: @cfont2;
        font-size: 28px/2;
    }
    .mui-btn-blue{
        color: @red;
    }
}
